<template>
    <Modal :title="modalTitle" v-model="isModalOpen" :mask-closable="false" :width="800"
           @on-visible-change="changeModalState" footer-hide>
        <div class="itemModal">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Row>
                    <Col span="12">
                        <FormItem label="名称" prop="elementName">
                            <!--                            <Input v-model="formValidate.elementName" placeholder />-->
                            <Select v-model="formValidate.elementName" placeholder>
                                <Option v-for="(item,index) in dataDict.channelGradeLevel1ElementDict" :key="index"
                                        :value="item.value">{{ item.title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <div class="text-center contract-close-btns">
                            <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                            <Button type="primary" @click="changeModalState(false)">取消</Button>
                        </div>
                    </Col>
                </Row>
            </Form>
        </div>
    </Modal>
</template>

<script>

export default {
    // 修改 指标分类 弹窗
    name: "IndicatorTypeModal",
    components: {},
    props: {
        modal: {
            type: Boolean,
            required: true
        },
        dataDict: {
            type: Object
        },
        modalTitle: {
            type: String,
            default: "修改指标分类"
        },
        getDataFn: {
            type: Function,
            required: true
        },
        modalData: {
            type: Object
        },
        modelCode: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            isModalOpen: this.modal,
            loading: false,
            formValidate: {elementName: '', elementNo: '', modelCode: this.modelCode},
            ruleValidate: {
                elementName: [
                    {required: true, type: 'string', message: '请输入模型名称', trigger: 'blur'}
                ],
            }
        };
    },
    watch: {
        modal: function (newVal) {
            if (newVal) {
                const {elementName, elementNo, elementType = '1'} = this.modalData;
                this.formValidate = {elementName, elementNo, elementType, modelCode: this.modelCode}
                console.log(this.formValidate);
            } else {
                this.formValidate = {elementName: '', elementNo: '', elementType: '', modelCode: this.modelCode}
            }
            this.isModalOpen = newVal;
        }
    },
    methods: {

        save(data) {
            let getDataFn = this.getDataFn;
            if (getDataFn && typeof getDataFn === "function") {
                getDataFn(data).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.$Message.success(res.data)
                        this.$emit("closeModal", true)
                    }
                }).catch(e => {
                    console.log(e);
                    this.loading = false;
                });
            }
        },
        // 提交
        handleSubmit(name) {
            if (this.loading) return;
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.save(this.formValidate);
                }
            });
        },

        //  弹窗切换
        changeModalState(bool) {
            if (!bool) this.$emit("closeModal");
        },
    }
};
</script>
<style scoped lang="less">
</style>
